<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let与var区别</title>
    <script>
        function f1(){
            // 对于var声明的变量,可以重名
            var id = 1;
            var id = 2;
            var id =3;
            console.log(id);
            // 对于let声明的变量,不能重名
            let name = "admin";
            // let name = "alice";
            console.log(name);
        }

        function f2(){
            // 使用var声明变量时,其超出作用域之后仍然可用。即:没有作用域的概念
            for(var i = 0; i < 10; i++){
            }
            console.log(i);
            // 使用let声明变量,声明的变量只能在对应作用域中使用。即:存在作用域概念
            for(let j = 0; j < 10; j++){

            }
            console.log(j);
        }
        function f3(){
            // 变量提升:所谓的变量提升,指的是将变量的声明提升到最先的位置
            // console.log(i);
            // var i = 10;
            // 变量提升后的代码相当于下面的操作
            var i;
            console.log(i);
            i = 10;

            // let没有变量提升
            console.log(j);
            let j = 10;
        }
    </script>
</head>
<body>
<button onclick="f1()">变量名区别</button><br>
<button onclick="f2()">作用域区别</button><br>
<button onclick="f3()">变量提升区别</button><br>
</body>
</html>